<template>
  <div :class="licInfolockedPageClass">
    <div class="mask">
      <div class="systemExpirationClass">
        <!-- {{ LicInfo.Code === 6111 ? "系统到期！" : "未发现许可证信息!" }} -->
        <img src="../../../../assets/licinfo/error01.png" />
      </div>
      <div style="color: #8b8b8b; font-size: 16px">
        {{ partnerName }}{{ partnerEmail }}{{ partnerPhone }}
      </div>
      <div class="bindFriendClass">
        <div @click="bindFriend()">公有云注册</div>
        <div @click="handleToBindPartner()">绑定伙伴</div>
      </div>
    </div>
    <Modal v-model="showBindPartner" width="650px" :title="$t('BindPartner')">
      <div
        style="
          display: flex;
          margin-bottom: 10px;
          justify-content: space-between;
          align-items: center;
        "
      >
        <div>{{ $t("NetworkingBinding") }}：{{ $t("PartnerID") }}：</div>
        <div>
          <Input
            v-model="partnerId"
            placeholder="Enter something..."
            style="width: 300px"
          />
        </div>
        <div>
          <Button type="primary" @click="handleToBindFriend">{{
            $t("BindNow")
          }}</Button>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
import config from "../../../../config";
import { mapGetters, mapState, mapMutations, mapActions } from "vuex";
// import licInfoPromptText from "../licInfoPromptText/licInfoPromptText.vue";
import { dateFormat } from "eutil";

export default {
  components: {
    // licInfoPromptText,
  },
  data() {
    return {
      formInline: {
        Domain: "",
        Password: "",
        PhoneModel: 2,
        PhoneType: "xiaomi6",
        Register: "0000000000000000000",
        RegisterType: 1,
        Uname: "",
        UserID: "",
        AppId: "",
        Token: "",
        ExpiresIn: 0,
      },
      partnerName: "",
      partnerEmail: "",
      partnerPhone: "",
      ExpireTime: "",
      partnerId: "",
      showBindPartner: false,
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.customers.userInfo,
    }),
    ...mapGetters(["isLocked", "CssPrefix", "showABInbevInfo", "LicInfo"]),
    userAvator() {
      if (
        this.$store.state.customers.userInfo.Avatar === " " ||
        this.$store.state.customers.userInfo.Avatar === ""
      ) {
        return `${this.$store.state.common.appRootURL}assets/images/avator.png`;
      }
      return (
        this.$store.state.common.appRootURL +
        this.$store.state.customers.userInfo.Avatar
      );

      // return "https://file.iviewui.com/dist/a0e88e83800f138b94d2414621bd9704.png"
    },
    licInfolockedPageClass() {
      return this.CssPrefix + "-licInfolockedPage";
    },
    //版权信息
    LoginCopyRightText() {
      return this.$store.state.common.LoginCopyRightText;
    },
  },
  methods: {
    ...mapMutations(["commonInit"]),
    ...mapActions("admin", [
      "registrationManagemnetPostRegistration",
      "registrationManagementBindFriend",
    ]),
    bindFriend() {
      this.registrationManagemnetPostRegistration().then((res) => {
        if (res.code === 2000) {
          this.$Message.success(this.$t("Success"));
          location.reload() 
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    handleToBindPartner() {
      this.showBindPartner = true;
    },
    handleToBindFriend() {
      this.registrationManagementBindFriend(this.partnerId).then((res) => {
        if (res.code === 2000) {
          this.showBindPartner = false;
          this.partnerId = res.result.PartnerInfo.PartnerId;
          this.$Message.success(this.$t("Success"));
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    Init() {
      if (this.LicInfo != {} && this.LicInfo != undefined) {
        this.partnerName =
          this.LicInfo.PartnerInfo.Name === ""
            ? ""
            : `请联系${this.LicInfo.PartnerInfo.Name}`;
        this.partnerEmail =
          this.LicInfo.PartnerInfo.BusinessContactEmail === ""
            ? ""
            : `，支持邮箱：${this.LicInfo.PartnerInfo.BusinessContactEmail}`;
        this.partnerPhone =
          this.LicInfo.PartnerInfo.BusinessContactPhone === ""
            ? ""
            : `，商务电话：${this.LicInfo.PartnerInfo.BusinessContactPhone}`;
        this.ExpireTime = dateFormat(
          new Date(this.LicInfo.ExpireTime * 1000),
          "yyyy-MM-dd hh:mm"
        );
        this.partnerId = this.LicInfo.PartnerInfo.PartnerId;
      }
    },
  },
  mounted() {
    this.Init();
  },
};
</script>

<style lang="less">
@import "../../../../styles/common.less";

.@{krp-css-prefix}licInfolockedPage {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background-color: #fff !important;
  // background-image: url("https://keyportaldev.krclouds.com/upload/2/0/20210126/1611655542570771500.jpg");
  // background-attachment: fixed;
  // background-repeat: no-repeat;
  // background-size: cover;
  .systemExpirationClass {
    font-size: 32px;
    color: yellow;
  }
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .form {
      width: 400px;
      height: 600px;
      // background: red;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .avatar {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .username {
        height: 60px;
        line-height: 60px;
        font-size: 18px;
        font-weight: bold;
        color: #fff;
      }
      .input {
        width: 360px;
        button {
          width: 60px;
          i {
            font-size: 20px;
          }
        }
      }
      .ivu-input::placeholder {
        color: gray;
      }
    }
    .copyright {
      font-size: 16px;
      color: #fff;
      position: absolute;
      bottom: 40px;
    }
  }
  .bindFriendClass {
    display: flex;
    width: 200px;
    justify-content: space-between;
    text-decoration: underline;
    color: #cf1919;
    font-size: 16px;
    margin: 5px;
    cursor: pointer;
  }
}
</style>
